<style lang="less" scoped>
  /deep/.el-dialog--center .el-dialog__body {
    padding: 7px 0 33px 57px;
  }
  .addFrontEndProcessorDialog {
    /deep/.el-dialog {
      height: 85%;
      box-sizing: border-box;
      /deep/.el-dialog__body {
        box-sizing: border-box;
        height: 85%;
      }
    }
  }
  /*兼容火狐/deep/失效问题*/
  .addFrontEndProcessorDialog {
    /deep/.el-dialog {
      height: 85%;
      box-sizing: border-box;
      .el-dialog__body {
        box-sizing: border-box;
        height: 100%;
      }
    }
  }
</style>
<template>
  <el-dialog
    :title="dialogTitle"
    :append-to-body='true'
    :visible.sync="AddFrontEndProcessorShow"
    :before-close="AddFrontEndProcessorClose"
    class="addFrontEndProcessorDialog"
    width="1200px"
    top="3%"
    center>
    <div class="clear_fixed" style="height:100%;overflow-y: auto;margin-top: -7px">
      <el-form
        class="clear_fixed"
        label-position="right"
        label-width="100px"
        :disabled="dialogType === 'view'"
        :model="dialogData"
        :rules="dialogDataRules"
        ref="dialogDataForm">
        <div class="of fl bbd pb26" style=" width: 1068px;">
          <div class="f18 mb20 clr_333" style="margin-top: 27px">基本信息</div>
          <div class="w100 mt30 clear_fixed">
            <el-form-item label="系统名称：" label-width="98px" class="fl" prop="system_id">
              <el-select :disabled="group !== 'tenancy'" v-model="dialogData.system_id" placeholder="请选择系统名称" size="medium" style="width:250px" clearable>
                <el-option
                  v-for="item in systemsLiteList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="机构名称：" label-width="100px" class="fl" prop="institution_id">
              <el-select :disabled="institutionsLiteList.length === 0" v-model="dialogData.institution_id" placeholder="请选择机构名称" size="medium" style="width:250px" clearable>
                <el-option
                  v-for="item in institutionsLiteList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="前置机名称：" label-width="120px" class="fl" prop="front_node_name">
              <el-input
                size="medium"
                placeholder="请输入前置机名称"
                style="width:250px;"
                v-model="dialogData.front_node_name"
                clearable>
              </el-input>
            </el-form-item>
          </div>
          <div class="w100 mt10 clear_fixed">
            <el-form-item label="IP地址：" label-width="98px" class="fl" prop="front_node_host">
              <el-input
                size="medium"
                placeholder="请输入IP地址"
                style="width:250px;"
                v-model="dialogData.front_node_host"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="影像缓存路径：" label-width="128px" class="fl" prop="image_path">
              <el-input
                size="medium"
                placeholder="请输入缓存路径"
                style="width:592px;"
                v-model="dialogData.image_path"
                clearable>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <div class="clear_fixed fl bbd pb15 mt30" style="width: 1068px;">
          <div class="f18 mb20 clr_333">
            <span class="mr20">设备工作列表服务</span>
            <el-switch
              v-model="dialogData.mwl_enable"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </div>
          <div class="w100 mt30 clear_fixed">
            <el-form-item label="应用标识：" label-width="98px" class="fl" prop="mwl_aet">
              <el-input
                size="medium"
                placeholder="请输入应用标识"
                style="width:250px;"
                v-model="dialogData.mwl_aet"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="端 口 号：" label-width="100px" class="fl" prop="mwl_port">
              <el-input
                size="medium"
                placeholder="请输入端口号"
                style="width:250px;"
                v-model="dialogData.mwl_port"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="日志保存时长：" label-width="128px" class="fl" prop="mwl_log_save_days">
              <el-input-number style="width: 100px" size="medium" v-model="dialogData.mwl_log_save_days" controls-position="right" :min="1"></el-input-number>
              <span class="ml10">天</span>
            </el-form-item>
<!--            <el-form-item label-width="0" class="fl ml34" prop="mwl_is_auto_regist">-->
<!--              <el-checkbox v-model="dialogData.mwl_is_auto_regist" :true-label="1" :false-label="0">自动注册</el-checkbox>-->
<!--            </el-form-item>-->
          </div>
          <div class="w100 mt10 clear_fixed">
            <el-form-item label="日志保存路径：" label-width="98px" prop="mwl_log_path">
              <el-input
                size="medium"
                placeholder="请输入保存路径"
                v-model="dialogData.mwl_log_path"
                clearable>
              </el-input>
            </el-form-item>
          </div>
          <div class="w100 mt10 clear_fixed">
            <el-form-item label="日志等级：" prop="mwl_log_model">
              <el-radio-group v-model="dialogData.mwl_log_model">
                <el-radio :label="0">致命</el-radio>
                <el-radio :label="1">错误</el-radio>
                <el-radio :label="2">警告</el-radio>
                <el-radio :label="3">过程</el-radio>
                <el-radio :label="4">调试</el-radio>
                <el-radio :label="5">跟踪</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
        <div class="clear_fixed fl bbd pb15 mt30" style=" width: 1068px;">
          <div class="f18 mb20 clr_333">
            <span class="mr20">影像存储服务</span>
            <el-switch
              v-model="dialogData.store_enable"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </div>
          <div class="w100 mt30 clear_fixed">
            <el-form-item label="应用标识：" label-width="98px" class="fl" prop="store_aet">
              <el-input
                size="medium"
                placeholder="请输入应用标识"
                style="width:250px;"
                v-model="dialogData.store_aet"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="端 口 号：" label-width="100px" class="fl" prop="store_port">
              <el-input
                size="medium"
                placeholder="请输入端口号"
                style="width:250px;"
                v-model="dialogData.store_port"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="日志保存时长：" label-width="128px" class="fl" prop="store_log_save_days">
              <el-input-number style="width: 100px" size="medium" v-model="dialogData.store_log_save_days" controls-position="right" :min="1"></el-input-number>
              <span class="ml10">天</span>
            </el-form-item>
<!--            <el-form-item label-width="0" class="fl ml34" prop="store_auto_regist">-->
<!--              <el-checkbox v-model="dialogData.store_auto_regist" :true-label="1" :false-label="0">自动注册</el-checkbox>-->
<!--            </el-form-item>-->
          </div>
          <div class="w100 mt10 clear_fixed">
            <el-form-item label="日志保存路径：" label-width="98px" prop="store_log_path">
              <el-input
                size="medium"
                placeholder="请输入保存路径"
                v-model="dialogData.store_log_path"
                clearable>
              </el-input>
            </el-form-item>
          </div>
          <div class="w100 mt10 clear_fixed">
            <el-form-item label="日志等级：" prop="store_log_mode">
              <el-radio-group v-model="dialogData.store_log_mode">
                <el-radio :label="0">致命</el-radio>
                <el-radio :label="1">错误</el-radio>
                <el-radio :label="2">警告</el-radio>
                <el-radio :label="3">过程</el-radio>
                <el-radio :label="4">调试</el-radio>
                <el-radio :label="5">跟踪</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
        <div class="clear_fixed fl bbd pb15 mt30" style=" width: 1068px;">
          <div class="f18 mb20 clr_333">
            <span class="mr20">查询获取服务</span>
            <el-switch
              v-model="dialogData.qr_enable"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </div>
          <div class="w100 mt30 clear_fixed">
            <el-form-item label="应用标识：" label-width="98px" class="fl" prop="qr_aet">
              <el-input
                size="medium"
                placeholder="请输入应用标识"
                style="width:250px;"
                v-model="dialogData.qr_aet"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="端 口 号：" label-width="100px" class="fl" prop="qr_port">
              <el-input
                size="medium"
                placeholder="请输入端口号"
                style="width:250px;"
                v-model="dialogData.qr_port"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="日志保存时长：" label-width="128px" class="fl" prop="qr_log_save_days">
              <el-input-number style="width: 100px" size="medium" v-model="dialogData.qr_log_save_days" controls-position="right" :min="1"></el-input-number>
              <span class="ml10">天</span>
            </el-form-item>
<!--            <el-form-item label-width="0" class="fl ml34" prop="qrIsAutoRegist">-->
<!--              <el-checkbox v-model="dialogData.qrIsAutoRegist" :true-label="1" :false-label="0">自动注册</el-checkbox>-->
<!--            </el-form-item>-->
          </div>
          <div class="w100 mt10 clear_fixed">
            <el-form-item label="日志保存路径：" label-width="98px" prop="qr_log_path">
              <el-input
                size="medium"
                placeholder="请输入保存路径"
                v-model="dialogData.qr_log_path"
                clearable>
              </el-input>
            </el-form-item>
          </div>
          <div class="w100 mt10 clear_fixed">
            <el-form-item label="日志等级：" prop="qr_log_mode">
              <el-radio-group v-model="dialogData.qr_log_mode">
                <el-radio :label="0">致命</el-radio>
                <el-radio :label="1">错误</el-radio>
                <el-radio :label="2">警告</el-radio>
                <el-radio :label="3">过程</el-radio>
                <el-radio :label="4">调试</el-radio>
                <el-radio :label="5">跟踪</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer mt20 mb20 fr" style="margin-right: 57px">
        <el-button @click="AddFrontEndProcessorClose" size="small" class="mr20">关闭</el-button>
        <el-button v-if="dialogType !== 'view'" type="primary" @click="AddFrontnodesSave('dialogDataForm')" size="small">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import CommonTable from '@/components/common/CommonTable'
import { validIP, validPath, validPort } from '@/utils/validate'
import { mapGetters } from 'vuex'

export default {
  data () {
    let requiredValidator = function (tip) {
      return (rule, value, callback) => {
        if(value === '') {
          callback(new Error(tip))
        }else {
          callback()
        }
      }
    }
    let front_node_nameValidator = (rule, value, callback) => {
      if(value === '') {
        callback(new Error('请输入前置机名称'))
      }else {
        if(value.length > 40) {
          callback(new Error('前置机名称长度限制：40个字符'))
        }else {
          callback()
        }
      }
    }
    let ipValidator = (rule, value, callback) => {
      if(value !== '') {
        if(validIP(value)) {
          return callback()
        }else {
          return callback(new Error('IP地址格式错误'))
        }
      }else {
        return callback(new Error('请输入IP地址'))
      }
    }
    let imgPathValidator = (rule, value, callback) => {
      if(value !== '') {
        if(validPath(value)) {
          return callback()
        }else {
          return callback(new Error('影像缓存路径输入错误'))
        }
      }else {
        return callback(new Error('请输入影像缓存路径'))
      }
    }
    let aetValidator = (serviceName) => {
      return (rule, value, callback) => {
        if(this.dialogData[serviceName] === 1) {
          if(value === '') {
            callback(new Error('请输入应用标识'))
          }else {
            callback()
          }
        }else {
          callback()
        }
      }
    }
    let portValidator = (serviceName) => {
      return (rule, value, callback) => {
        if(this.dialogData[serviceName] === 1) {
          if(value !== '') {
            if(validPort(value)) {
              callback()
            }else {
              callback(new Error('端口号范围为0-65535'))
            }
          }else {
            callback(new Error('请输入端口号'))
          }
        }else {
          callback()
        }
      }
    }
    let pathValidator = (serviceName) => {
      return (rule, value, callback) => {
        if(value !== '') {
          if(validPath(value)) {
            callback()
          }else {
            callback(new Error('日志保存路径输入错误'))
          }
        }else if(value === '' && this.dialogData[serviceName] === 1) {
          callback(new Error('请输入日志保存路径'))
        }else {
          callback()
        }
      }
    }
    let daysIptNumValidator = (serviceName, iptName) => {
      return (rule, value, callback) => {
        if(this.dialogData[serviceName] === 1) {
          if(value === undefined) {
            callback(new Error('请输入'))
          }else if(!Number.isInteger(value)) {
            this.dialogData[iptName] = parseInt(value)
          }else {
            callback()
          }
        }else {
          if(!Number.isInteger(value)) {
            this.dialogData[iptName] = parseInt(value)
          }else {
            callback()
          }
        }
      }
    }
    let logModeValidator = (serviceName) => {
      return (rule, value, callback) => {
        if(this.dialogData[serviceName] === 1 && value === '') {
          callback(new Error('请选择日志等级'))
        }else {
          callback()
        }
      }
    }
    return {
      dialogTitle: '新增前置机',
      dialogData: {
        system_id: '',
        system_name: '',
        institution_id: '',
        institution_name: '',
        front_node_name: '',
        front_node_host: '',
        image_path: '',
        mwl_enable: 1,
        mwl_aet: '',
        mwl_port: '',
        // mwl_is_auto_regist: '',
        mwl_log_path: '',
        mwl_log_save_days: '',
        mwl_log_model: '',
        store_enable: 1,
        store_aet: '',
        store_port: '',
        // store_auto_regist: '',
        store_log_path: '',
        store_log_save_days: '',
        store_log_mode: '',
        qr_enable: 1,
        qr_aet: '',
        qr_port: '',
        // qrIsAutoRegist: '',
        qr_log_path: '',
        qr_log_save_days: '',
        qr_log_mode: ''
      },
      dialogDataRules: {
        system_id: [{
          trigger: 'blur',
          validator: requiredValidator('请选择系统名称')
        }],
        institution_id: [{
          trigger: 'blur',
          validator: requiredValidator('请选择机构名称')
        }],
        front_node_name: [{
          trigger: 'blur',
          validator: front_node_nameValidator
        }],
        front_node_host: [{
          trigger: 'blur',
          validator: ipValidator
        }],
        image_path: [{
          trigger: 'blur',
          validator: imgPathValidator
        }],
        mwl_aet: [{
          validator: aetValidator('mwl_enable')
        }],
        mwl_port: [{
          trigger: 'blur',
          validator: portValidator('mwl_enable')
        }],
        mwl_log_path: [{
          trigger: 'blur',
          validator: pathValidator('mwl_enable')
        }],
        store_aet: [{
          validator: aetValidator('store_enable')
        }],
        store_port: [{
          trigger: 'blur',
          validator: portValidator('store_enable')
        }],
        store_log_path: [{
          trigger: 'blur',
          validator: pathValidator('store_enable')
        }],
        qr_aet: [{
          validator: aetValidator('qr_enable')
        }],
        qr_port: [{
          trigger: 'blur',
          validator: portValidator('qr_enable')
        }],
        qr_log_path: [{
          trigger: 'blur',
          validator: pathValidator('qr_enable')
        }],
        mwl_log_save_days: [{
          trigger: 'blur',
          validator: daysIptNumValidator('mwl_enable', 'mwl_log_save_days')
        }],
        store_log_save_days: [{
          trigger: 'blur',
          validator: daysIptNumValidator('store_enable', 'store_log_save_days')
        }],
        qr_log_save_days: [{
          trigger: 'blur',
          validator: daysIptNumValidator('qr_enable', 'qr_log_save_days')
        }],
        mwl_log_model: [{
          trigger: 'blur',
          validator: logModeValidator('mwl_enable')
        }],
        store_log_mode: [{
          trigger: 'blur',
          validator: logModeValidator('store_enable')
        }],
        qr_log_mode: [{
          trigger: 'blur',
          validator: logModeValidator('qr_enable')
        }]
      },
      // tenantOptions: [],
      institutionsLiteList: [], // 机构名称
      isInstitutionsClear: 1, // 打开dialog后第一次改变系统名称,不清空机构名称的值,后面每次都清空,dialogType为add时,从第一次开始就清空机构名称的值
    }
  },
  props: ['AddFrontEndProcessorShow', 'rowId', 'dialogType', 'systemsLiteList'],
  watch: {
    dialogType (newVal) { // 修改弹窗标题
      this.dialogTitle = newVal === 'add' ? '新增前置机' : newVal === 'view' ? '查看' : newVal === 'modify' ? '修改' : ''
      if (newVal === 'add') {
        this.dialogData = this.$options.data().dialogData
        // if(this.tenantOptions.length !== 0) {
        //   this.dialogData.tenantId = this.tenantOptions[0]['id']
        // }
        this.$emit('resetRowId')
      }
    },
    AddFrontEndProcessorShow (newVal) {
      this.$nextTick(() => {
        if(newVal) {
          // // 这里要改成 this.group
          if(this.group === 'dept') { // 科室角色
            this.$nextTick(() => {
              this.dialogData.system_id = this.systemid
            })
          }
          this.$refs['dialogDataForm'].resetFields();
          if(this.dialogType !== 'add') {
            this.getFrontnodes()
          }
        }else {
          this.isInstitutionsClear = 1
        }
      })
    },
    'dialogData.system_id': {
      handler: function (newVal) {
        console.log(newVal)
        if(newVal === '') {
          this.dialogData.system_name = ''
        }else {
          this.systemsLiteList.forEach((ele) => {
            if(ele.id === newVal) {
              this.dialogData.system_name = ele.name
            }
          })
          if(this.dialogType === 'add') {
            this.dialogData.institution_id = ''
          }
          if(this.dialogType === 'modify' && this.isInstitutionsClear === 2) {
            this.dialogData.institution_id = ''
          }
          this.getInstitutionsLiteList(newVal) // 获取机构名称
        }
      },
      immediate: true
    },
    'dialogData.institution_id': {
      handler: function (newVal) {
        if(newVal === '') {
          this.dialogData.institution_name = ''
        }else {
          this.institutionsLiteList.forEach((ele) => {
            if(ele.id === newVal) {
              this.dialogData.institution_name = ele.name
            }
          })
        }
      }
    },
  },
  computed: {
    ...mapGetters(['group', 'systemid'])
  },
  methods: {
    AddFrontEndProcessorClose () {
      this.$emit('AddFrontEndProcessorClose', '')
    },
    AddFrontnodesSave (formName) { // 保存按钮
      this.$refs[formName].validate((valid) => {
        if(valid) {
          if (this.dialogType === 'add') {
            this.addFrontnodes()
          } else if (this.dialogType === 'modify') {
            this.updateFrontnodes()
          }
        }else {
          return false
        }
      })
    },
    async addFrontnodes () { // 新增
      const res = await this.$pacsApi.pacsApi.addFrontnodes(this.dialogData)
      const { code, msg } = res
      if (code === 0) {
        this.$message({
          type: 'success',
          message: msg
        })
        this.AddFrontEndProcessorClose()
        this.$emit('refreshTable')
        // 重置数据
        this.$emit('resetRowId')
      }
    },
    async updateFrontnodes () { // 更新
      const res = await this.$pacsApi.pacsApi.updateFrontnodes(this.dialogData, this.rowId)
      const { code, msg } = res
      if (code === 0) {
        this.$message({
          type: 'success',
          message: msg
        })
        this.AddFrontEndProcessorClose()
        this.$emit('refreshTable')
        // 重置数据
        this.$emit('resetRowId')
      }
    },
    async getFrontnodes () {
      const res = await this.$pacsApi.pacsApi.getFrontnodes(this.rowId)
      const { code, data } = res
      if (code === 0) {
        this.dialogData = data
        this.$nextTick(() => {
          this.isInstitutionsClear = 2
        })
      }
    },
    // async getTenantInfo() {
    //   let res = await this.$pacsApi.pacsApi.getTenantInfo()
    //   let { code, data } = res
    //   if(code === 0) {
    //     this.tenantOptions.push(data)
    //   }
    // },
    async getInstitutionsLiteList(val) {
      if(val) {
        let res = await this.$pacsApi.pacsApi.getInstitutionsLiteList({ system_id: val })
        let { code, data } = res
        if(code === 0) {
          this.institutionsLiteList = data
        }
      }
    },
  },
  mounted () {
    // this.getTenantInfo() // 获取客户信息
  },
  components: {
    CommonTable
  },
}
</script>
